import jmLogo from '@/assets/jm_logo.png'
import { Spacer } from '@/components/ui/spacer'
import { Outlet } from 'react-router-dom'
import { MenuBar } from '@/components/menu-bar'
import { createContext, Dispatch, SetStateAction, useState } from 'react'
import PMClientTitle from '@/components/svgs/pm-client-title'

type AuthContextType = {
  idCard?: string
  setIdCard?: Dispatch<SetStateAction<string>>
}

export const AuthContext = createContext<AuthContextType>({
  idCard: undefined,
  setIdCard: undefined,
})

export default function AuthLayout() {
  const [idCard, setIdCard] = useState('')

  return (
    <AuthContext.Provider value={{ idCard, setIdCard }}>
      <div className='flex flex-col justify-center items-center w-screen h-screen bg-background'>
        <div className='flex flex-col items-center min-w-[19.5rem] h-[33.125rem]'>
          <img
            src={jmLogo}
            alt='山西焦煤 Logo'
            className='w-[7.75rem] h-9 max-h-9'
          />
          <Spacer className='h-5' />
          <PMClientTitle />
          <Spacer className='h-8' />
          <Outlet />
        </div>
        {window.CallBridge && <MenuBar showMaximizeButton={false} />}
      </div>
    </AuthContext.Provider>
  )
}
